<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>组织中心</el-breadcrumb-item>
        <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
        <el-breadcrumb-item>店铺商品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="toolbar">
      <el-form :inline="true" :model="dataForm" :size="size" ref="dataForm">
        <el-row class="search-input">
          <el-form-item label="商品类目：" prop="goodsCategory">
            <el-input clearable v-model="dataForm.goodsCategory"></el-input>
          </el-form-item>
          <el-form-item label="商品编号：" prop="id">
            <el-input clearable v-model="dataForm.id"></el-input>
          </el-form-item>
          <el-form-item label="商品名称：" prop="goodsName">
            <el-input clearable v-model="dataForm.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="状态：" prop="goodsStatus">
            <el-select v-model="dataForm.goodsStatus" placeholder="全部" clearable>
              <el-option
                v-for="item in goodsStatusList"
                :key="item.code"
                :label="item.message"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row class="search-button">
          <el-form-item>
            <kt-button
              :label="'搜索'"
              type="primary"
              @click="queryPage"
              icon="el-icon-search"
            />
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="onSuccess"
              :on-error="onError"
              :multiple="false"
              :show-file-list="false"
              :limit="100"
              :file-list="fileList">
              <kt-button type="primary" :label="'导入商品'" perms="sys:product:excel" />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <kt-button
              :label="'下载模板'"
              type="primary"
              perms="sys:product:excel"
              @click="downloadTemplate"
            />
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="tableData"
        :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554','text-align': 'center'}"
        :max-height="1500"
        row-key="goodsInfo.id"
        :size="'mini'"
        border
        default-expand-all
        :tree-props="{children: 'skuInfoList', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="goodsInfo.id"
          label="商品编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.goodsName"
          label="商品名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.goodsCategory"
          label="商品类目"
          width="100">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.measureUnit"
          label="计量单位"
          width="100">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.salePriceScope"
          label="商品价格"
          width="180">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.stock"
          label="库存"
          width="100">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.goodsAttributes"
          label="货品规格"
          width="300">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.merchantName"
          label="所属商家"
          width="180">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.storeName"
          label="所属店铺"
          width="180">
        </el-table-column>
        <el-table-column
          prop="goodsInfo.childName"
          label="所属平台"
          width="180">
        </el-table-column>
        <el-table-column class-name="status-col" align="center" label="状态" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsInfo.goodsStatus == 1">上架</span>
            <span v-else>下架</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          :current-page="dataForm.start"
          :page-size="dataForm.limit"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="'返回结果展示'"
      :visible.sync="editDialogVisible"
      width="35%"
      center>
      <el-table
        :data="failRowsTable"
        :size="'mini'"
        border
        default-expand-all>
        <el-table-column
          prop="rowNo"
          label="行号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="reason"
          label="失败原因"
          width="180">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      KtButton
    },
    data() {
      return {
        dataForm:{
          id: null,
          goodsCategory: null,
          goodsName: null,
          goodsStatus: null,
          childId: null,
          merchantId: null,
          storeId: null,
          start: 1,
          limit: 10
        },
        totalSize: 0,
        tableData: [],
        childList: [],
        merchantList: [],
        storeList: [],
        goodsStatusList: [
          {code:1, message:"上架"},
          {code:0, message:"下架"}
        ],
        size: 'small',
        fileList: [],
        uploadUrl: '',
        editDialogVisible:false,
        failRowsTable:[],
      }
    },
    methods: {
      initData(){
        this.uploadUrl = this.utils.getMarketUrl() + 'goods/query/importGoods';
      },

      queryPage(){
        let _this = this;
        this.utils.request.goodsQueryManagerPage(this.dataForm, function (res) {
          console.log(res);
          if(res.code == '0000'){
            _this.tableData = res.data.rows;
            _this.totalSize = res.data.total;
            console.log(res.data.rows);
          }
        });
      },

      currentChange(start){
        this.dataForm.start = start;
        this.queryPage();
      },
      sizeChange(limit){
        this.dataForm.start = 1;
        this.dataForm.limit = limit;
        this.queryPage();
      },

      onSuccess(res){
        if(res.code == '0000'){
          this.dataForm.start = 1;
          this.failRowsTable = res.data.failRows;
          this.editDialogVisible = true;
          this.queryPage();
        }
      },
      onError(err){
        this.$message({ message: err, type: "fail" });
      },

      //下载模板
      downloadTemplate() {
        //原生js下载模板
        var $form = $('<form method="GET"></form>');
        $form.attr("action", "/static/excels/TEMPLATE_GOODS.xls");
        $form.appendTo($("body"));
        $form.submit();
      },

    },
    mounted() {
      this.queryPage();
      this.initData();
    }
  }
</script>
<style lang="scss" scoped>

</style>
